<template>
    <div class="home">
        <div class="jumpLoad" v-if="isLoading">
            <div >
                <img  class="jumpLoadIMG" src="../../public/img/loading.gif" alt="">
                <span class="txt">正在加载中...</span>
            </div>
        </div>
        <van-overlay :show="show" @click="show = false" @touchmove="false">
            <div class="addCarHelp" @click.stop>
                <div class="block" >添加购物车成功</div>
            </div>
        </van-overlay>

        <van-swipe class="my-swipe" :autoplay="3000" :show-indicators="true" indicator-color="#000000" >

            <van-swipe-item v-for="(v,i) in swiperData" :key="i" @click="jumpHref(v.goods_id,'Detail','goodsID')">
                <img v-lazy="'./img/'+v.HS_src" />
            </van-swipe-item>
        </van-swipe>

        <div class="help">
            <div>
                <img class="help-img" src="../../public/img/help-img_05.png" alt="">
                <span>新客满298元送切块蛋糕</span>
            </div>
            <div>
                <img class="help-img" src="../../public/img/help-img_05.png" alt="">

                <span>满100包邮</span>
            </div>
            <div>
                <img class="help-img" src="../../public/img/help-img_05.png" alt="">
                <span>全程冷链配送</span>
            </div>
        </div>
        <div class="list-top">
            <div>
                <a href="#">
                    <div class="img-box">
                        <img src="../../public/img/listIMG01_03.png" alt="">
                    </div>
                    <div class="txt">
                        蛋糕
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="img-box">
                        <img src="../../public/img/listIMG02.png" alt="">
                    </div>
                    <div class="txt">
                        面包
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="img-box">
                        <img src="../../public/img/listIMG03_03.png" alt="">
                    </div>
                    <div class="txt">
                        下午茶
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="img-box">
                        <img src="../../public/img/bql.png" alt="">
                    </div>
                    <div class="txt">
                        冰淇淋
                    </div>
                </a>
            </div>
        </div>
        <div class="demos">
            <div class="demo" v-for="(v,i) in demoRender">
                <div class="more">
                    <div class="newTag">{{v.tag}}</div>
                    <div class="newHref" @click="jumpHref(v.tag,'more','tagName')"><a href="javascript:;">更多
                        <van-icon class="arrow" name="arrow"/>
                    </a></div>
                </div>
                <div class="demo-con" v-for="(v2,j) in v.arr" @click="jumpHref(v2.id,'Detail','goodsID')">
                    <div class="img-box">
                        <img :src="'/img/'+v2.demoIMG" alt="">
                    </div>
                    <div class="msg">
                        <div class="top">
                            <div class="name">
                                {{v2.NAME}}
                            </div>
                            <div class="price">
                                {{v2.s_money}}
                                <span>
                                    元/{{v2.g_shopWeight}}g({{v2.u_unit=='个'?'一'+v2.u_unit:(v2.g_shopWeight/454).toFixed(1)+''+v2.u_unit}})
                                </span>
                            </div>
                        </div>
                        <div class="bottom">
                            <span>{{v2.g_msg}}</span>
                        </div>
                        <div class="addBuyCar" @click.stop="addCarF(v2.id,v2.g_shopWeight+'g'+'('+(v2.u_unit=='个'?'一'+v2.u_unit:(v2.g_shopWeight/454).toFixed(1)+''+v2.u_unit)+')')">
                            <img src="../../public/img/buycar.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="end">
            <span>没了</span>
            <img src="../../public/img/end_11.png" alt="">
        </div>
        <myFooter></myFooter>

    </div>

</template>

<script>
    import '../../public/utilJS.js'
    // @ is an alias to /src

    import "vant/lib/swipe/style";
    import "vant/lib/swipe-item/style";
    import "vant/lib/swipe-cell/style";
    import "vant/lib/icon/index.css";
    import myFooter from '../components/MyFooter.vue';
    import Vue from 'vue';
    import {Swipe, SwipeItem, Icon,Lazyload,Overlay} from 'vant';



    Vue.use(Swipe);
    Vue.use(SwipeItem);
    Vue.use(Icon);
    Vue.use(Lazyload);
    Vue.use(Overlay);
    export default {
        name: 'Home',
        components: {
            myFooter
        },
        data(){
          return {
              demoRender: [],
              swiperData: [],
              buyCarData:[],
              show:false,
              isLoading:true,
          }
        },
        watch:{
            demoRender(){
                this.$nextTick(()=>{
                    this.isLoading=false;
                })
            },
            swiperData(){

            }
        },
        methods:{

             noRepeatF(arr,pro){
                var temp=[];
                var newArr=[];
                for (var i=0;i<arr.length;i++){
                    var index=temp.indexOf(arr[i][pro]);
                    if (index==-1){
                        temp.push(arr[i][pro]);
                        var temp2={};
                        temp2.arr=[arr[i]];
                        temp2[pro]=arr[i][pro];
                        newArr.push(temp2);

                    } else {
                        newArr[index].arr.push(arr[i])
                    }

                }
                return newArr

            },
            jumpHref(v,target,key){
                this.$router.push({path: '/'+target+'?'+key+'='+v})
                return false;
            },
            addCarF(id,weight){
                this.buyCarData.push({
                    goods_id:id,
                    weight:weight,
                    goods_num:0
                });


                var temp=[];
                var narr=[];
              for (var i=0;i<this.buyCarData.length;i++){
                  var n=temp.indexOf(this.buyCarData[i].goods_id);
                  if (n==-1){
                      temp.push(this.buyCarData[i].goods_id);
                      narr.push({weight:this.buyCarData[i].weight,goods_num:this.buyCarData[i].goods_num||1,goods_id:this.buyCarData[i].goods_id})
                  }else {
                      narr[n].goods_num+=1
                  }
              };
                window.localStorage.setItem('waresLists',JSON.stringify(narr));
                this.show=true;
                setTimeout(()=>{
                    this.show=false
                },1000)
            }

        }
        ,
        mounted(){
            if (window.localStorage.waresLists){
                this.buyCarData=JSON.parse(window.localStorage.waresLists);
            } else {
                this.buyCarData=[]
            }
          this.axios('/api/homeSwiper').then(res =>{
            this.swiperData=res.data.swiperData
          });
            this.axios('/api/getHomeDemo').then(res => {
                this.demoRender=this.noRepeatF(res.data.demoRender,'tag');

            })

        }

    };
</script>

<style scoped lang="less">

    @import "../../public/utilStyle.less";
.home{
    .jumpLoad{
        .jumpLoadIMG{
            position: absolute;
            left: 11.5rem;
            top: 2rem;
            width: 2rem;
            height: 2rem;
        }
        .txt{
            font-size: 2rem;
            padding-top: 2rem;
            width: 100%;
            line-height: 100%;
            height: 100%;
            display: block;
            color: #989898;
            padding-left: 1rem;
        }
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: white;
        z-index: 9999;
        >div{
            text-align: center;
            width: 100%;
            line-height: 100%;
            height: 100%;
        }
    }

    .addCarHelp{
        background: white;
        color: #ec5051;
        text-align: center;
        .px2rem(font-size,24);
        .px2rem(width,200);
        .px2rem(line-height,100);
        .px2rem(height,100);

        position: absolute;
        top: 50%;
        left: 50%;
        margin: -2.5rem 0 0 -5rem;
    }
    .px2rem(padding-bottom, 100);
    position: relative;
        .end{
            position: absolute;
            color: #e3e3e3;
            span{
                font-size: 1rem;
                margin-top: 2rem;
                float: left;
            }
            .px2rem(bottom,340);
            .px2rem(right,40);
            img{
                .px2rem(width,80);
            }
        }

    .my-swipe {
        .px2rem(height, 420);
        width: 100%;

        i {
            .px2rem(height, 20);
            .px2rem(width, 20);
        }

        img {
            .px2rem(height, 420);
            width: 100%;

        }
    }

    .help {

        .px2rem(margin-left, 40);
        .px2rem(width, 670);
        .px2rem(height, 70);

        > div {
            color: #d3b692;
            float: left;
            .px2rem(line-height, 70);
            position: relative;

            span {
                display: inline-block;
                .px2rem(margin-left, 5);
                .px2rem(padding-left, 20);
                .px2rem(font-size, 25);
            }

            > .help-img {
                position: absolute;
                .px2rem(top, 23);
                left: 0;
                .px2rem(height, 20);
                .px2rem(width, 20);
            }
        }

        > div:nth-child(2) {
            .px2rem(margin-left, 10);

        }

        > div:last-child {
            float: right;

        }

    }

    .list-top {
        .px2rem(height, 159);
        .px2rem(margin-left, 40);
        .px2rem(margin-right, 40);

        > div {
            .px2rem(margin-left, 95);
            float: left;

            > a {
                float: left;

                .img-box {
                    .px2rem(height, 78);
                    .px2rem(width, 78);
                    border-radius: 50%;
                    box-shadow: .0rem .1rem .3rem .2rem #f9f4ee;
                    overflow: hidden;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 0 auto;

                    img {
                        .px2rem(width, 60);
                        display: flex;
                    }
                }

                .txt {
                    display: inline-block;
                    width: 100%;
                    .px2rem(font-size, 24);
                    .px2rem(margin-top, 20);
                    float: left;
                    text-align: center;
                    color: #6d5451;
                    white-space: nowrap;
                }
            }
        }

        div:first-child {
            .px2rem(margin-left, 30)
        }
    }

    .demo {
        padding: 0 2rem 0;
        .more {
            border-top: 1px solid #dedede;
            padding: 1rem 0;
            overflow: hidden;
            > div {

            }

            .newTag {
                .px2rem(height, 40);
                .px2rem(font-size, 24);
                .px2rem(line-height, 40);
                padding: 0 1rem;
                color: #2d241b;
                border-radius: 1rem;
                background: #f3eae1;
                display: inline-block;
                float: left;
            }

            .newHref {
                float: right;
                display: inline-block;
                position: relative;
                padding-right: 1rem;
                a{
                    color: #8a8a8a;
                }
                .arrow {
                    position: absolute;
                    right: 0;

                    .px2rem(top, 4);
                    font-weight: bold;
                }
            }
        }
        .demo-con{
            box-shadow: .0rem 0rem .2rem .2rem #f4f0ed;
            padding-bottom: 1.75rem;
            .px2rem(margin-bottom,40);
            .px2rem(border-radius,10);
            overflow: hidden;

            .img-box{
                .px2rem(width,670);
                .px2rem(height,355);
                background: #c6c6c6;
                img{
                    .px2rem(width,670);
                    .px2rem(height,355);
                }
            }
            .top{
                overflow: hidden;
                .px2rem(padding-top,20);
                padding-left: 1.25rem;
                >div{
                    float: left;
                }
                .name{
                    .px2rem(font-size,30);
                    font-weight: bold;
                    color: #25180f;
                }
                .price{
                    .px2rem(font-size,26);
                    color: #c7b094;
                    margin-left: 1rem;
                    span{
                        color: #929292;
                        .px2rem(font-size,20);
                    }
                }
            }
            .bottom{
                .px2rem(font-size,26);
                margin-top: 1.25rem;
                span{
                    float: left;
                    margin-left: 1.25rem;
                    color: #38221b;
                }
            }
            .msg{
                position: relative;
                .px2rem(height,110);
                .addBuyCar{
                    position: absolute;
                    .px2rem( right,32);
                    .px2rem( bottom,-8);
                    .px2rem(width,70);
                    .px2rem(height,70);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    box-shadow: .0rem .1rem .2rem .2rem #f9f4ee;
                    border-radius: 50%;
                    img{
                        .px2rem(width,44);
                    }
                }
            }


        }

    }

}
</style>
